

.beekeeper-modal {

  .dialog-c-title {
    &.has-icon {
      display: flex;
      align-items: center;
      i.material-icons {
        margin-right: 1rem;
        font-size: 1.2em;
      }
    }
  }

  &.upgrade-modal {
    .dialog-content {
      padding: 2rem 2rem 1rem;
    }
    .dialog-c-title {
      font-size: 1.2em;
    }
    .checkbox-wrapper {
      margin-left: auto;
      margin-right: auto;
      ul.check-list {
        padding-left: 0;
        li {
          padding-bottom: 10px;
          &:before {
            font-family: "Material Icons";
            content: "\e5ca";
            margin-right: 0.5rem;
            margin-bottom: -10px;
            color: $brand-success;
          }
          list-style: none;
        }
      }
      > p {
        margin-bottom: 0;
      }
    }
    .check-list {
      margin-bottom: 0;
    }
    .vue-dialog-buttons {
      justify-content: stretch;
      padding-left: 0;
      padding-right: 0;
      padding-top: 1rem;
      & > div {
        width: 100%;
      }
      .actions {
        justify-content: flex-end;
      }
    }
    .close-btn {
      top: 1.5rem;
      right: 1.5rem;
    }
  }

  &.confirmation-modal, &.sql-files-import-modal, &.wait-sso-modal {
    .v--modal {
      width: auto !important;
      min-height: 0px;
    }
    .dialog-content {
      padding: 1.5rem 1.5rem 2rem;
    }
    .dialog-c-title {
      padding-bottom: 1.25rem;
    }
    .vue-dialog-buttons {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      padding-bottom: 1.5rem;
      display: flex;
      gap: 0.5rem;

      & > .btn:last-child {
        margin-right: 0;
      }
    }
  }

  &.sql-files-import-modal {
    .message {
      line-height: 1.5;
    }

    .file-picker-wrapper {
      margin-top: 1rem;
    }
  }

  &.wait-sso-modal {
    .dialog-content {
      padding-top: 2rem;
      padding-bottom: 0.5rem;
    }
    .dialog-c-title {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-right: 0;
    }
    .vue-dialog-buttons {
      padding-bottom: 2rem;
      justify-content: center;
    }
  }

  // PIN Modal Styles
  &.create-pin-modal, &.input-pin-modal, &.update-pin-modal {
    .v--modal {
      width: 31.25rem;
      min-height: 0px;
    }

    .description {
      margin-bottom: 0.5rem;

      p {
        margin: 0;
        color: var(--text-light);
        line-height: 1.5;
        font-size: 0.9rem;
      }
    }

  }

  &.super-formatter-modal {
    .v--modal {
      min-width: 90vw;
      min-height: 80vh;
      display: flex;
    }
    .dialog-content {
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    & .dialog-c-title {
      display: flex;
      padding-right: 0 !important;
      justify-content: space-between;
      align-items: start;
      & p {
        margin: 0;
        padding: .5rem 0 0 0;
      }
    }
  }
}
